<!--
 * @Description: 时间轴
 * @Author: zhailei
 * @Date: 2021-05-20 18:13:04
 * @LastEditTime: 2021-09-16 11:13:14
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\k-portal-design\component\timeLine.vue
-->
<template>
  <a-card
    :hoverable="true"
    :style="{ height: cHeight }"
    class="c-schedule-159357"
  >
    <template slot="title" v-if="options.titleShow">
      <icon-fonts
        :icon="'icon-' + record.options.iconFont"
        class="card-title-icon"
        :style="{ color: options.iconFontColor }"
      />
      <span>{{ record.options.title }}</span>
    </template>
    <tableView
      v-if="getTableSource.uuid && tableShow"
      ref="tableViewRef"
      :isShowQuery="record.options.isShowQuery"
      :isShowToolForm="record.options.isShowToolForm"
      :tableUID="getTableSource.uuid"
    ></tableView>
  </a-card>
</template>

<script>
import tableView from "@/pages/form/formPreview/index.vue";
export default {
  name: "formWarp",
  data() {
    return {
      schedulerList: [],
      loading: true,
      visibleDetail: false,
      options: {},
      formOptions: {},
      tableShow: true,
    };
  },
  components: { tableView },
  props: { record: { type: Object } },
  watch: {
    record: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.options = newVal.options || {};
        this.formOptions = newVal.options.formOptions || {};
      },
    },

    getTableSource: {
      handler(val) {
        this.tableShow = false;
        setTimeout((_) => {
          this.tableShow = true;
        }, 1);
      },
    },
  },
  computed: {
    cHeight() {
      let val = this.record?.options.height;
      if (val) {
        return Number(val) + "px";
      }
      return "100%";
    },
    getTableSource() {
      let { uuid } = this.record?.options?.chooseFromData ?? {};
      return { uuid };
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less">
.c-schedule-159357.ant-card {
  overflow: hidden;
  > .ant-card-body {
    height: calc(100% - 46px) !important;
    overflow-y: scroll;
  }
}
</style>
